<script lang="tsx">
import "./LyTable.less"
import {
  ElCard,
  ElPagination,
  ElTable,
  ElTableColumn,
  TableColumnInstance,
} from "element-plus";
import { defineComponent, onMounted, PropType, ref, watch } from "vue";
import ColumnSetting from "./components/ColumnSetting.vue";
import { JSX } from "vue/jsx-runtime";
// import { VueDraggable } from "vue-draggable-plus";

export default defineComponent({
  name: "Table",
  props: {
    page: {
      type: [Object, Boolean],
      default: {},
    },
    // 表格列
    columns: {
      type: Array as PropType<TableColumnInstance[]>,
      default: [],
    },
    // 表格属性
    nativeOptions: {
      type: Object,
      default: {},
    },
    // // 是否显示分页
    isShowPage: {
      type: Boolean,
      default: true,
    },
    // 水平对齐方式
    pageHorizontalAlign: {
      type: String,
      default: "right",
    },
    // 垂直对齐方式
    pageVerticalAlign: {
      type: String,
      default: "right",
    }
  },
  emits: ["currentChange", "updateColumnSetting", "currentChange"],
  setup: (props: any, { attrs, emit, slots, expose }) => {    

    const TeableMaxHeight = ref(0);

    const columnSettingRef = ref<any>(null);

    const tableRef = ref<any>(null);

    // 当前页改变时调用
    const currentChange = (currentPage: number) => {
      emit("currentChange", currentPage);
    };

    // 封装列组件
    const Column = (ColumnProps: any) => {
      const { render = null, renderHeader = null } = ColumnProps;
      return (
        <>
          <ElTableColumn
            {...{ ...ColumnProps, render: undefined, renderHeader: undefined }}
            key={ColumnProps.prop}
          >
            {{
              default: (scope: any) => {
                return render && render(scope.row, scope.$index, scope);
              },
              header: (scope: any) => {
                return renderHeader && renderHeader(scope);
              },
            }}
          </ElTableColumn>
        </>
      );
    };

    // 渲染表格列
    const RenderColumns = (columns: any) => {
      const filterColumns = columns.filter((item: any) => {
        return !item.hidden
      });
      return filterColumns.map((item: any) => {
        return Column(item);
      });
    };

    const ColumnsComp = ref<JSX.Element[]>(RenderColumns(props.columns));

    onMounted(() => {
      const root = document.documentElement;
      // console.log(getComputedStyle(root))
      const topHeadHeight = Number(getComputedStyle(root).getPropertyValue("--top-head-height").slice(0, -2));
      const tagsViewHeight = Number(getComputedStyle(root).getPropertyValue("--tags-view-height").slice(0, -2));
      const footerHeight = Number(getComputedStyle(root).getPropertyValue("--app-footer-height").slice(0, -2));
      const tableTopDom: any = document.querySelector(".ly-table-top")
      const tableTopHeight = tableTopDom.clientHeight
      const pageDom:any = document.querySelector(".ly-page")
      const pageHeight = pageDom.clientHeight
      TeableMaxHeight.value = window.innerHeight - 40 - topHeadHeight - tagsViewHeight - footerHeight - tableTopHeight-pageHeight;
    });

    const updateColumns = (columns: any) => {
      // const newColumns = columns.filter((item: any) => {
      //   return !item.hidden
      // })
      // ColumnsComp.value = RenderColumns(newColumns);
      emit("updateColumnSetting", columns)
    };

    const openColumnSetting = () => {
      columnSettingRef.value.open();
    };

    // 监听 columns 的变化
    watch(
      () => props.columns,
      (newColumns) => {
        ColumnsComp.value = RenderColumns(newColumns);
      }
    );

    // 暴露方法
    expose({
      // page,
      // currentChange,
      openColumnSetting,
      tableRef
    });
    // console.log(slots);
    return () => {
      return (
        <div class="ly-table">
          <div class="ly-table-box">
            <ColumnSetting onUpdateColumnSetting={updateColumns} ref={columnSettingRef} columns={props.columns} />
            {slots.tableTop && <div class="ly-table-top"><ElCard shadow="never">{slots.tableTop()}</ElCard></div>}
            <ElCard shadow="never">
              <>
                <div style={{display: 'flex', flexDirection:props.pageVerticalAlign === 'top' ? 'column-reverse' : 'column'}}>
                  <ElTable ref={tableRef} {...attrs} maxHeight={TeableMaxHeight.value}>
                    {/* {RenderColumns(props.columns)} */}
                    {ColumnsComp.value}
                  </ElTable>
                  <div class="ly-page" style={{display: props.isShowPage ? 'flex' : 'none', justifyContent: props.pageHorizontalAlign}}>
                    {
                      props.isShowPage&&<ElPagination onUpdate:current-page={currentChange} currentPage={props.page.currentPage} layout="prev, pager, next"
                      defaultPageSize={props.page.pageSize} total={props.page.total} pageSizes={props.page.pageSizes} />
                    }
                  </div>
                </div>
              </>
            </ElCard>
          </div>
        </div >
      );
    };
  },
});
</script>
